// 条件渲染 
// 没有指令 原生js实现
// 语法： { flag && <  />}

// import { Component } from "react";

// class DemoA extends Component {
//     constructor(props) {
//         super(props)
//         this.state = {
//             flag: true,
//             num: 0
//         }
//     }
//     // 多个元素---封装自定义渲染函数
//     renderHn() {
//         let { num } = this.state
//         let res = null
//         if (num === 1) res = <h1>im h1</h1>
//         if (num === 2) res = <h2>im h2</h2>
//         if (num === 3) res = <h3>im h3</h3>
//         return res
//     }
//     render() {
//         let { flag } = this.state
//         return (
//             <div>
//                 <h1 style={{ display: (flag ? 'block' : 'none') }}>类组件</h1>
//                 {/* 单一元素 */}
//                 {flag && <h1>h1</h1>}
//                 {/* 多个标签 */}
//                 {flag &&
//                     (
//                         <div>
//                             <h1>hola</h1>
//                             <h1>hola</h1>
//                         </div>
//                     )}
//                 {/* 两个元素 */}
//                 {flag ? <h2>h2</h2> : <h3>h3</h3>}
//                 {/* 多个元素 */}
//                 {this.renderHn()}
//                 <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>show/hidden</button>
//                 <button onClick={() => this.setState(_ => ({ num: (_.num + 1) % 7 }))}>change num</button>
//             </div>
//         )
//     }
// }

// export default DemoA

// ----------------------------------------------------------------------------------------------------------------

import { useState } from "react";

function DemoA() {
    let [num, setNum] = useState(0)

    let renderHn = () => {
        let res = null
        switch (num) {
            case 0:
                res = <h1>h1</h1>
                break;
            case 1:
                res = <h2>h2</h2>
                break;
            case 3:
                res = <h3>h3</h3>
                break;
        }
        return res
    }

    return (
        <div>
            {renderHn()}
            <button onClick={() => setNum((num + 1) % 3)}>change num</button>
        </div>
    )
}

export default DemoA

